<template>
    <div class="btns">
        <div @click="upper"></div>
        <div :class="playState" @click="playPause"></div>
        <div @click="next"></div>
    </div>
</template>

<script setup>
    import { ref, inject } from 'vue';
    const emitter = inject('emitter');

    let audio;
    emitter.on('getAudio', (value) => {
        audio = value;
    })


    const playState = ref('start');
    const playPause = () => {
        if(!audio) return
        if(playState.value === 'start') {
            playState.value = 'stop';
            audio.play();
        }else {
            playState.value = 'start';
            audio.pause();
        }
    }

    defineExpose({
        playState
    })

    const upper = () => emitter.emit('getUpperSongId') 
    const next = () => emitter.emit('getNextSongId');




</script>

<style lang='less' scoped>
.btns {
    width: 13%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        cursor: pointer;
        &:nth-child(1) {
            background: url(../../assets/img/before.png) no-repeat;
            background-size: 100% 100%;
        }
        &:nth-child(2) {
            width: 30px;
            height: 30px;
            border: 2.5px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: 100% 100%;
        }
        &:nth-child(3) {
            background: url(../../assets/img/next.png) no-repeat;
            background-size: 100% 100%;
        }
        &:hover {
            box-shadow: 0 0 5px 1px white;
        }
    }
    .start {
        background: url(../../assets/img/play.png) no-repeat;
        background-position-x: 1px;
    }
    .stop {
        background: url(../../assets/img/playing.png) no-repeat;
    }
}
</style>